<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/templet/coreTempletDemo.js" />
<div id="coreTempletTab">
	<div title="API">
	    <h2>Ccay.UI.template(tmpl,datas,startIndex,key)</h2>
	    <form class="ccay-form">
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>相关API</h3></samp>
					<span class="ccay-form-input">
						<h3>描述</h3>
					</span>
				</li>
				<li  class="ccay-form-row">
					<samp>tmpl</samp>
					<span class="ccay-form-input">模板对象选择器或模板字符</span>
				</li>
				<li  class="ccay-form-row">	
					<samp>datas</samp>
					<span class="ccay-form-input">json数据源</span>
				</li>
				<li  class="ccay-form-row">
					<samp>startIndex</samp>
					<span class="ccay-form-input">列表模板中的开始序号，默认为1</span>
				</li>
				<li  class="ccay-form-row">
					<samp>key</samp>
					<span class="ccay-form-input">缓存模板的key值</span>
				</li>
			</ul>
		</div>
		</form>
	</div>
	<div title="script模板生成">
		<div  style="width:50%; float:left; padding: 2px 15px 30px 8px">
		<h4><span>script模板生成</span></h4>
		<div id='scriptContainer1'></div>
			<script type="tmpl" id="scriptTmpl1">
			
			<table class="ccay-table">
				<legend>${title}</legend> 
			
   			  <% for (var i = 0; users[i]; i ++) { user=users[i];%>
				<tr> 
   				  <td width='15%'>${i}</td><td width='20%'>Name</td><td width='15%'>${user.name}</td> <td width='15%'>Age</td><td width='15%'>${user.age}</td><td width='15%'>Sex</td><td width='15%'>${user.sex}</td>
				</tr>   			
 			 <% } %>
			
			</table>
			
			</script>
							
			<script type="text/javascript">
			$(function(){
				var datas = {title:'模板引擎',
						users:[
				           {name:"隐形杀手",age:29,sex:"男"},
				           {name:"索拉",age:22,sex:"男"},
				           {name:"fesyo",age:23,sex:"女"},
				           {name:"恋妖壶",age:18,sex:"男"},
				           {name:"竜崎",age:25,sex:"男"},
				           {name:"你不懂的",age:30,sex:"女"}
				         ]};
			
				$('#scriptContainer1').html(Ccay.UI.template("scriptTmpl1",datas));
							
			})
			</script>
		</div>
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
		<pre id='html'> 
&lt;h4>&lt;span>script模板生成&lt;/span>&lt;/h4>
&lt;div id='scriptContainer'>&lt;/div>
&lt;script type="tmpl" id="scriptTmpl">
	&lt;table class="ccay-table">
	   &lt;legend>${title}&lt;/legend> 
	  	 &lt;% for (var i = 0; users[i]; i ++) { user=users[i];%>
	  &lt;tr> 
		 &lt;td width='15%'>${i}&lt;/td width='15%'>&lt;td width='15%'>Name&lt;/td>
		 &lt;td width='15%'>${user.name}&lt;/td> &lt;td width='15%'>Age&lt;/td>
		 &lt;td width='15%'>${user.age}&lt;/td>&lt;td width='15%'>Sex&lt;/td>&lt;td width='15%'>${user.sex}&lt;/td>
	  &lt;/tr>   			
		&lt;% } %>
	&lt;/table>
&lt;/script>
	   </pre>		
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js'>
var datas = {title:'模板引擎',
   users:[
           {name:"隐形杀手",age:29,sex:"男"},
           {name:"索拉",age:22,sex:"男"},
           {name:"fesyo",age:23,sex:"女"},
           {name:"恋妖壶",age:18,sex:"男"},
           {name:"竜崎",age:25,sex:"男"},
           {name:"你不懂的",age:30,sex:"女"}
         ]};

   $('#scriptContainer').html(Ccay.UI.template("scriptTmpl",datas));
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#coreTempletTab',$('#js').html(),$('#html').html())">试一试</a>
		</div>
	</div>
	
	<div title="文本模板生成">
		<div  style="width:50%; float:left; padding: 2px 15px 30px 8px">
			<h4><span>文本模板生成</span></h4>
			<div id='txtContainer1'></div>
			<script type="text/javascript">
				$(function(){
					var datas = {title:'模板引擎',
							users:[
					           {name:"隐形杀手",age:29,sex:"男"},
					           {name:"索拉",age:22,sex:"男"},
					           {name:"fesyo",age:23,sex:"女"},
					           {name:"恋妖壶",age:18,sex:"男"},
					           {name:"竜崎",age:25,sex:"男"},
					           {name:"你不懂的",age:30,sex:"女"}
					       ]};
					
					var txtTmpl = "<table class='ccay-table'><legend>${title}</legend><ul> " 
						+ "<%for (var i = 0; users[i]; i ++) { user=users[i];%>"
						+ " <tr><td width='15%'>${i}</td><td width='15%'>Name</td><td width='15%'>${user.name}</td><td width='15%'>Age</td><td width='15%'>${user.age}</td><td width='15%'>Sex</td><td width='15%'>${user.sex}</td></tr>"
						+ "<%}%></tr></table>";
					$('#txtContainer1').html(Ccay.UI.template(txtTmpl,datas));
				});
			</script>
        </div>
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>文本模板生成&lt;/span>&lt;/h4>
&lt;div id='txtContainer11'>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
var datas = {title:'模板引擎',
	users:[
          {name:"隐形杀手",age:29,sex:"男"},
          {name:"索拉",age:22,sex:"男"},
          {name:"fesyo",age:23,sex:"女"},
          {name:"恋妖壶",age:18,sex:"男"},
          {name:"竜崎",age:25,sex:"男"},
          {name:"你不懂的",age:30,sex:"女"}
        ]};
				
var txtTmpl = "&lt;table class='ccay-table'>&lt;legend>${title}&lt;/legend>&lt;ul> " 
		/*通过for循环把users数组里面的值循环出来，然后在把值赋给user*/
	+ "&lt;%for (var i = 0; users[i]; i ++) { user=users[i];%>"
		/*用${}里面放对象直接可以获取到里面的值*/
	+ " &lt;tr>&lt;td width='15%'>${i}&lt;/td>"
	+"&lt;td width='15%'>Name&lt;/td>&lt;td width='15%'>${user.name}&lt;/td>"
	+"&lt;td width='15%'>Age&lt;/td>&lt;td width='15%'>${user.age}&lt;/td>"
	+"&lt;td width='15%'>Sex&lt;/td>&lt;td width='15%'>${user.sex}&lt;/td>&lt;/tr>"
	+ "&lt;%}%>&lt;/tr>&lt;/table>";
       /*txtTmpl是模板对象选择器和模板字符  datas是json数据源*/
$('#txtContainer11').html(Ccay.UI.template(txtTmpl,datas));

			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#coreTempletTab',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>